<template>
  <li class="item">
    <div v-if="dataType === 'record'" :style="{ color: color }" class="item__mask" :class="itemIndex > 3 && 'normal'">
      {{ itemIndex }}
    </div>
    <div @click="pathTo" class="item__image">
      <img :src="baseURL + item.img" alt="" />
    </div>
    <div class="item__digest">
      <span>{{ item.name }}
        <strong>{{ item.price.toFixed(2) }}</strong>
      </span>
      <div>购买:{{ +(item["purchase_time"]) }}</div>
    </div>
  </li>
</template>

<script setup lang="ts">
import { withDefaults } from "vue";
import { baseURL } from "@/api/request";
import { useRouter } from "vue-router";
import { GoodsItem } from "@/views/home/index.vue";
interface Props {
  dataType: string;
  itemIndex: number;
  color: string;
  item: GoodsItem
}
const router = useRouter();
const props = withDefaults(defineProps<Props>(), {
  dataType: "search",
  itemIndex: 0,
  color: "255,255,255",
  item: null
});

const pathTo = () => {
  router.push({
    path: `/details/${props.item.id}`,
    query: { item: JSON.stringify(props.item) },
  })
}
</script>

<style lang="scss" scoped>
.item {
  height: 176rem;
  width: 156rem;
  margin-bottom: 20rem;
  border-radius: 20rem;
  outline: 4rem solid rgba($color-yellow, 0.5);
  @include flex(column, center, center);
  position: relative;

  &__mask {
    @include absolutePOS(0, 0, 0, 0);
    font-weight: 700;
    font-size: 64rem;
    font-family: "Courier New", Courier, monospace;
    opacity: 0.6;

    &.normal {
      color: #eee !important;
      font-size: 48rem;
    }
  }

  &:nth-child(even) {
    transform: translateY(8rem);
  }

  &:nth-child(3n) {
    outline-color: rgba($color-pink, 0.5);
  }

  &:nth-child(3n + 1) {
    outline-color: rgba($color-green, 0.5);
  }

  &__image {
    height: 120rem;
    width: 156rem;
    border-radius: 20rem 20rem 0 0;
    border: 2rem solid var(--border-color);
    @include flex(row, center, center);

    img {
      height: 74%;
      width: 74%;
    }
  }

  &__digest {
    width: 156rem;
    height: 54rem;
    border-radius: 0 0 20rem 20rem;
    @include flex(row, flex-end, space-between);
    box-sizing: border-box;
    padding: 0 10rem 10rem;

    span {
      font-size: 16rem;
      color: var(--font-color);

      @include flex(column, flex-start, center);

      strong {
        margin-top: 4rem;
        font-size: 14rem;
        color: rgba(#ef0d25, 0.8);

        &::before {
          font-size: 10rem;
          content: "$";
          margin-right: 2rem;
        }
      }
    }

    >div {
      font-size: 12rem;
      color: #999;
    }
  }
}
</style>
